<template>
  <div class="pdf">
    <div class="tools">
      <el-button type="primary" @click.stop="prePage"> 上一页</el-button>
      <el-button type="primary" @click.stop="nextPage"> 下一页</el-button>
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <el-button type="primary" @click.stop="clock" class="mr10"
        >顺时针</el-button
      >
      <el-button type="primary" @click.stop="counterClock">逆时针</el-button>
    </div>
    <pdf
      ref="pdf"
      :src="url"
      :page="pageNum"
      :rotate="pageRotate"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum = $event"
      @error="pdfError($event)"
      @link-clicked="page = $event"
    >
    </pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  name: "pdf-page",
  components: {
    pdf,
  },
  data() {
    return {
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      // url: require("../../../assets/pdf123.pdf"),
      // url: require("@/assets/pdf123.pdf"),
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    };
  },
  mounted() {
    this.getNumPages();
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          console.log("pdf===", pdf);

          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    // 上一页函数，
    prePage() {
      var page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
  },
};
</script>
<style>
.pdf {
  width: 700px;
  margin: 0 auto;
}
</style>
